<script setup lang="ts">
import { ref } from "vue"
import { useRouter } from "vue-router"
import { showToast } from "vant"
import { useUserInfo } from "@/stores/counter"
import { storeToRefs } from "pinia"
//处理支付问题


const store = useUserInfo();
const { isLogin, user } = storeToRefs(store);
const { changeIsLogin } = store;
const router = useRouter();
const agreement = ref(false);
const phone = ref<string>();
const verfiy = ref<string>();
const loginHandle = () => {
  if (!phone.value || !verfiy.value) {
    showToast("信息不能为空");
    return;
  }
  if (!(/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/g.test(phone.value.toString()))) {
    showToast("请输入正确的手机号");
    return;
  }
  if (!agreement.value) {
    showToast("请先阅读相关协议");
    return;
  }
  localStorage.setItem("token", "123172");

  showToast("登录成功");
  changeIsLogin(true);
  router.replace("/mine");
}
</script>
<template>
  <div class="fixed-zbest login-detail animate__animated animate__backInRight">
    <header class="header">
      <van-icon @click="router.go(-1)" class="icon" name="cross" />
    </header>
    <div class="svg-box">
      <svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
        version="1.1" width="275.984375" height="61.34375" viewBox="0 0 275.984375 61.34375">
        <g style="mix-blend-mode:passthrough">
          <path id="path"
            d="M52.4844,10.4219L52.4844,52.6406L49.3906,55.9531L21.6719,58.8438L21.0938,52.1406L45.7188,49.625L45.7188,10.2031L0,8.48438L0.28125,1.64062L60.4688,3.875L60.3281,10.7188L52.4844,10.4219ZM9.71875,44.2969L5.6875,19.8906L9.21875,15.9219L36.9375,17.0781L40.0312,21.1875L35.8438,42.5625L32.75,45.2969L13.3125,47.1094L9.71875,44.2969ZM15.8281,40.0469L29.7344,38.8281L32.6875,23.7031L13.0312,22.9844L15.8281,40.0469ZM107.672,31.8438L108.969,46.5312L107.953,49.125L96.5781,60.4219L91.8281,55.5938L102.125,45.4531L100.906,32.0469L80.375,32.625L77,29.0312L78.5156,7.09375L81.6719,3.9375L127.469,0.765625L127.906,7.60938L85.0625,10.4844L83.9844,25.7969L100.328,25.2812L99.3125,13.5312L106.094,12.8906L107.094,25.0938L127.688,24.4375L127.828,31.2656L107.672,31.8438ZM78.7344,58.2656L73.1094,54.4531L85.6406,36.1562L91.1875,39.9062L78.7344,58.2656ZM126.109,54.875L114.734,38.9688L120.203,35L131.641,50.9219L126.109,54.875ZM178.875,23.4688L168.578,61.3438L162.031,59.5469L171.812,23.8281L160.734,24.4688L160.375,17.7031L173.688,16.9844L178.156,0.71875L184.625,2.51562L180.75,16.5625L202.281,15.3281L202.703,22.0312L178.875,23.4688ZM157.703,12.4531L155.328,60.4844L148.562,60.125L150.641,18.4219L146.031,22.25L141.719,16.9844L161.594,0.21875L165.984,5.39062L157.703,12.4531ZM190.969,60.7656L186.141,58.0312L182.547,28.0781L189.172,27.2969L192.328,52.5469L203.359,47.4219L206.234,53.5625L190.969,60.7656ZM194.062,14.25L188.094,3.23438L194.062,0L199.969,11.0156L194.062,14.25ZM267.125,52.3438L268.781,37.75L256.047,38.3906L256.906,52.3438L267.125,52.3438ZM253.672,59.0469L250.359,55.9531L249.125,35.4531L252.234,31.8438L272.531,30.7656L275.984,34.5156L273.469,56.0469L270.078,59.0469L253.672,59.0469ZM237.031,52.3438L238.688,37.8281L224.156,39.2188L226.172,52.3438L237.031,52.3438ZM223.281,59.0469L219.969,56.2656L216.875,36.6719L219.969,32.7969L242.297,30.7812L245.891,34.5156L243.438,56.0469L239.984,59.0469L223.281,59.0469ZM234.078,21.9375L261.234,19.9844L262.531,9.10938L232.219,9.10938L234.078,21.9375ZM227.75,26.1094L224.875,6.23438L228.25,2.34375L266.266,2.34375L269.656,6.09375L267.641,23.5156L264.609,26.4688L231.344,28.9844L227.75,26.1094Z"
            fill="#E20A33" fill-opacity="1" />
        </g>
      </svg>
    </div>
    <div class="svg-box2">
      <svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
        version="1.1" width="180.94921875" height="27.38671875" viewBox="0 0 180.94921875 27.38671875">
        <g style="mix-blend-mode:passthrough">
          <path
            d="M16.2305,26.8828L7.34766,19.1016L7.34766,16.6406L14.625,9.66797L16.957,12.1172L11.0156,17.8008L18.4688,24.3047L16.2305,26.8828ZM3.35156,25.9336L0,25.2188L5.15625,1.81641L8.46094,2.54297L3.35156,25.9336ZM21.5977,21.7266L30.5977,21.7266L30.5977,12.0234L21.5977,12.0234L21.5977,21.7266ZM32.3672,25.125L19.3711,25.125L17.7773,22.8867L18.6445,10.4297L20.2617,8.625L32.0391,8.625L33.9844,10.0312L33.9844,23.7539L32.3672,25.125ZM39.1992,26.9531L35.8125,26.4844L38.918,4.64062L42.2578,5.07422L39.1992,26.9531ZM65.1328,26.7188L61.5234,25.7109L60.8789,24.9492L46.0078,27.3398L44.0625,25.2773L46.1602,17.0273L47.7773,15.7266L59.1562,15.7266L58.3945,10.0898L45.4336,13.2656L44.6133,9.97266L59.4023,6.32812L61.4883,7.76953L63.5039,22.7461L66.0234,23.4727L65.1328,26.7188ZM47.9883,23.543L59.9414,21.6211L59.625,19.125L49.1133,19.125L47.9883,23.543ZM84.5273,26.4844L82.7227,24.668L84.3867,1.59375L86.1797,0L105.598,1.3125L105.598,4.71094L87.6914,3.55078L86.2969,23.0039L103.406,22.1367L102.797,15.375L92.8477,15.375L92.8477,11.9766L104.414,11.9766L106.031,13.5234L106.969,23.5898L105.387,25.4648L84.5273,26.4844ZM112.348,21.7266L121.348,21.7266L121.348,12.0234L112.348,12.0234L112.348,21.7266ZM123.117,25.125L110.121,25.125L108.527,22.8867L109.395,10.4297L111.012,8.625L122.789,8.625L124.734,10.0312L124.734,23.7539L123.117,25.125ZM130.348,21.7266L139.348,21.7266L139.348,12.0234L130.348,12.0234L130.348,21.7266ZM141.117,25.125L128.121,25.125L126.527,22.8867L127.395,10.4297L129.012,8.625L140.789,8.625L142.734,10.0312L142.734,23.7539L141.117,25.125ZM149.074,14.25L147.902,22.8633L158.848,21.668L158.848,15.8086L149.074,14.25ZM146.098,26.4727L144.258,24.5625L145.922,12.082L147.867,10.6289L158.449,12.3281L157.875,4.125L161.285,4.125L162.551,23.0391L161.039,24.8438L146.098,26.4727ZM174.68,27.3867L164.379,25.4648L165.035,22.1016L174.105,23.8359L176.766,19.207L166.043,17.6953L164.602,15.8086L165.141,8.83594L166.734,7.27734L178.348,6.375L178.348,9.77344L168.457,10.5352L168.129,14.5078L179.684,16.1719L180.949,18.7031L176.449,26.5898L174.68,27.3867Z"
            fill="#E20A33" fill-opacity="1" />
        </g>
      </svg>
    </div>
    <div class="phone">
      <div class="img-box">
        <svg t="1678451455795" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="6408" width="16" height="16">
          <path
            d="M768 0H256a102.4 102.4 0 0 0-102.4 102.4v819.2a102.4 102.4 0 0 0 102.4 102.4h512a102.4 102.4 0 0 0 102.4-102.4V102.4a102.4 102.4 0 0 0-102.4-102.4z m-256 972.8a51.2 51.2 0 1 1 51.2-51.2 51.2 51.2 0 0 1-51.2 51.2z m256-153.6H256V102.4h512z"
            fill="#151515" p-id="6409"></path>
        </svg>
      </div>
      <div class="phone-text">+86</div>
      <input type="text" v-model="phone" placeholder="请输入手机号">
    </div>
    <div class="phone verification">
      <div class="img-box">
        <svg t="1678455034504" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="6794" width="16" height="16">
          <path
            d="M486.4 609.28h51.2v138.24h-51.2zM371.2 453.12h-51.2v-102.4c0-102.4 81.92-184.32 184.32-184.32s184.32 81.92 184.32 184.32v61.44h-51.2v-61.44c0-74.24-58.88-133.12-133.12-133.12-74.24 0-133.12 58.88-133.12 133.12v102.4z"
            fill="#151515" p-id="6795"></path>
          <path d="M512 593.92m-48.64 0a48.64 48.64 0 1 0 97.28 0 48.64 48.64 0 1 0-97.28 0Z" fill="#151515" p-id="6796">
          </path>
          <path
            d="M724.48 893.44H299.52c-33.28 0-58.88-25.6-58.88-58.88v-332.8c0-33.28 25.6-58.88 58.88-58.88h422.4c33.28 0 58.88 25.6 58.88 58.88v332.8c2.56 33.28-25.6 58.88-56.32 58.88zM299.52 491.52c-5.12 0-7.68 2.56-7.68 7.68v332.8c0 5.12 2.56 7.68 7.68 7.68h422.4c5.12 0 7.68-2.56 7.68-7.68v-332.8c0-5.12-2.56-7.68-7.68-7.68H299.52z"
            fill="#151515" p-id="6797"></path>
        </svg>
      </div>
      <input type="text" v-model="verfiy" placeholder="请输入验证码">
    </div>
    <div class="login-check">
      <input v-model="agreement" type="checkbox">
      <span>我同意</span>
      <div class="agreement">
        <span>《可乐优品隐私协议》</span>
        <span>《可乐优品服务协议》</span>
      </div>
    </div>
    <div class="btn btn-active" @click.stop="loginHandle">登录</div>
    <div class="login-order">
      <div class="line"></div>
      <div class="text">使用合作账号登录</div>
    </div>
    <div class="login-map">
      <div class="img-box">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39px" height="38px">
          <image x="0px" y="0px" width="39px" height="38px"
            xlink:href="data:img/png;base64,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" />
        </svg>
      </div>
      <div class="img-box">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="38px">
          <image x="0px" y="0px" width="40px" height="38px"
            xlink:href="data:img/png;base64,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" />
        </svg>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.login-detail {
  width: 100%;
  min-height: 100vmax;
  overflow: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  .header {
    width: 100%;
    height: .5rem;
    box-sizing: border-box;
    padding: 0 .15rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .icon {
      font-size: .2rem;
      font-weight: bold;
    }
  }

  .svg-box {
    width: 2rem;
    margin: 0 auto;
    margin-top: .5rem;

    .svg {
      stroke-dasharray: 1900;
      stroke-dashoffset: 1900;
      animation: svgIn 10s linear forwards 1.3s;
      stroke: var(--text-red-deep);
      opacity: 1;

      path {
        fill: transparent;
        animation: pathIn 0.5s linear forwards 2.6s;

        @keyframes pathIn {
          0% {
            fill: transparent;
          }

          100% {
            fill: var(--text-red-deep);
          }
        }
      }

      @keyframes svgIn {
        0% {
          stroke-dashoffset: 1900;
        }

        60% {
          stroke-dashoffset: 0;
          opacity: 1;
        }

        100% {
          stroke-dashoffset: 0;
          opacity: 1;
        }
      }
    }
  }

  .svg-box2 {
    width: 1.2rem;
    margin: 0 auto;
    margin-top: .1rem;

    .svg {
      stroke-dasharray: 974;
      stroke-dashoffset: 974;
      animation: svgIn1 10s linear forwards 1.3s;
      stroke: var(--text-red-deep);
      opacity: 1;

      path {
        fill: transparent;
        animation: pathIn1 0.5s linear forwards 2.6s;

        @keyframes pathIn1 {
          0% {
            fill: transparent;
          }

          100% {
            fill: var(--text-red-deep);
          }
        }
      }

      @keyframes svgIn1 {
        0% {
          stroke-dashoffset: 974;
        }

        60% {
          stroke-dashoffset: 0;
          opacity: 1;
        }

        100% {
          stroke-dashoffset: 0;
          opacity: 1;
        }
      }
    }
  }

  .phone {
    width: 3.2rem;
    box-sizing: border-box;
    padding: 0.1rem 0;
    display: flex;
    align-items: center;
    margin: 0 auto;
    margin-top: .5rem;
    border-bottom: .01rem solid var(--border-gray);

    .img-box {
      width: .18rem;
      aspect-ratio: 1/1;
    }

    .phone-text {
      font-size: .12rem;
      margin-left: .08rem;
      margin-right: .06rem;
    }

    >input {
      border: none;
      outline: none;
      text-indent: .06rem;
      flex-grow: 1;
    }
  }

  .verification {
    margin-top: .1rem;

    .img-box {
      width: .25rem;
      height: .25rem;
    }
  }

  .login-check {
    width: 3.2rem;
    font-size: .13rem;
    color: var(--text-gray);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding-top: .38rem;
    margin: 0 auto;

    input {
      margin-top: .01rem;
      margin-right: .05rem;
    }

    .agreement {
      text-align: center;
      color: var(--text-red-deep);
      font-size: .12rem;
    }
  }

  .btn {
    width: 3.2rem;
    height: .45rem;
    border-radius: .1rem;
    background-color: var(--bgc-gray-deep);
    color: var(--text-white);
    margin: 0 auto;
    margin-top: .2rem;
    text-align: center;
    line-height: .45rem;
  }

  .btn-active {
    background-color: var(--bgc-red);
  }

  .login-order {
    position: relative;
    font-size: .13rem;
    margin-top: .9rem;
    color: var(--text-gray);
    text-align: center;

    .line {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 80%;
      height: 0.01rem;
      background-color: var(--bgc-black);
      opacity: .1;
    }

    .text {
      position: relative;
      display: inline-block;
      background-color: var(--white);
      padding: 0 .2rem;
      color: var(--text-gray2);
    }
  }

  .login-map {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .2rem;

    .img-box {
      width: .4rem;
      height: .4rem;
      margin: 0 .25rem;
    }
  }
}
</style>